<template>
  <div class="row">

    <div class="page-header">

        <div class="row">
            <!-- Page header, center on small screens -->
            <h1 class="col-xs-12 col-sm-4 text-center text-left-sm"><i class="fa fa-table page-header-icon"></i>&nbsp;&nbsp;表格</h1>

            <div class="col-xs-12 col-sm-8">
                <div class="row">
                    <hr class="visible-xs no-grid-gutter-h">
                    <!-- "Create project" button, width=auto on desktops -->

                    <div class="pull-right col-xs-12 col-sm-auto">
                        <a href="#" class="btn btn-danger btn-labeled" style="width: 100%;"><span class="btn-label icon fa fa-trash-o"></span>删除</a>
                    </div>
                    
                    <div class="visible-xs clearfix form-group-margin"></div>
                    
                    <div class="pull-right col-xs-12 col-sm-auto">
                        <a href="#" class="btn btn-primary btn-labeled" style="width: 100%;"><span class="btn-label icon fa fa-plus"></span>添加</a>
                    </div>

                    <!-- Margin -->
                    <div class="visible-xs clearfix form-group-margin"></div>

                    <!-- Search field -->
                    <form action="" class="pull-right col-xs-12 col-sm-8">
                        <div class="input-group no-margin">
                            <span class="input-group-addon" style="border:none;background: #fff;background: rgba(0,0,0,.05);"><i class="fa fa-search"></i></span>
                            <input type="text" placeholder="搜索" class="form-control no-padding-hr" style="border:none;background: #fff;background: rgba(0,0,0,.05);">
                        </div> 
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- / .page-header -->
    <div class="row">
        <div class="col-sm-12">
            <div class="panel-body no-padding">
                <div class="table-light m0">
                    <!--111111111111-->
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th width="70">
                                    <div class="checkbox m0">
                                        <label>
                                            <input type="checkbox" name="jq-validation-checkbox2" class="px"> <span class="lbl"><b>全选</b></span>
                                        </label>
                                    </div>
                                </th>
                                <th>用户</th>
                                <th>商品名称</th>
                                <th>市场价</th>
                                <th>会员价</th>
                                <th width="100" class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in filterData" v-bind:key="item.id" v-if="index<10" v-show="oneshow">
                                <td>
                                    <div class="checkbox m0">
                                        <label>
                                            <input type="checkbox" name="jq-validation-checkbox2" class="px"> <span class="lbl">{{index + 1}}</span>
                                        </label>
                                    </div>
                                </td> 
                                <td><img :src="item.user_avatar" class="tab-portrait rounded mr10" /><span>{{item.user_nickname}}</span></td>
                                <td><img :src="item.img_url" class="tab-picture mr10" /><span>{{item.product_name}}</span></td>
                                <td>{{item.market_price}}</td>
                                <td>{{item.vip_price}}</td>
                                <td>
                                    <a class="color-sec" data-toggle="modal" data-target="#myModal" href="#">编辑</a>
                                    <a class="color-main pull-right" href="#">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!--111111111111-->
                    <div class="table-footer">
                        <span class="panel-title">共5页，每页10条数据</span>
                        <div class="panel-heading-controls">
                            <ul class="pagination pagination-xs">
                                <li  @click='prevPage'>
                                    <a href="#">上一页</a>
                                </li>
                                <li v-for="(item, index) in pageSum" v-bind:key="item.id" @click="clickPage(index)">
                                    <a href="#">{{item}}</a>
                                </li>
                                <li class="nextPage" @click='nextPage'>
                                    <a href="#">下一页</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                        <!--<div @click="showAll = !showAll" >{{word}}</div>
                        <div v-for='item in showList'>{{item}}</div>-->
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import axios from 'axios' 
import apimap from '../../lib/apimap'
 export default {
        data() {
            return {
				uploaderHeader: {
					'X-miniapp-Token': localStorage.getItem('token') || '',
					},
				init:[],
				indexshow:true,
				showAll:false,  　
				toLearnList:[
					'html','css','javascript','java','php'   //进行显示的数据
				],　　　
				oneshow:true,
				twoshow:false,
				// 分页
				allData: null, // 过滤前的所有数据
				filterData: null, // 过滤后的数据
				pageIndex: 0, // 当前页
				pageCount: 10, // 一页显示多少个
				pageSum: 5 // 总页数
            }
        }, 
        methods: {
			getData () {
				setTimeout(() => {
					let config = {
						headers: {
							'X-miniapp-Token':  localStorage.getItem('token') || '',
						}
					}
					axios.get(apimap.MemberProduct.url,config)
					.then((data) => {
						this.allData = data.data.data.selfproduct;
						console.log(this.allData);
						this.filterData = data.data.data.selfproduct.slice(0, this.pageCount)
					})
					.catch((error) => {
					});
				}, 500)
			},
		 
			// 上一页
			prevPage:function(){
					this.pageIndex = Math.max(--this.pageIndex, 0)
					this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
			},
			// 下一页
			nextPage:function(){
					this.pageIndex = Math.min(++this.pageIndex, this.pageSum)
        			this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
			},
			  // 单击页码
			clickPage: function(index) {
					this.pageIndex = index
        			this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
			}
        },
		 
		created () {
			this.getData()
		}
		 
    }
</script>